<template>
<div class="detail" >
    <van-icon name="revoke" class="goback"  @click="$router.go(-1)"/>
    <van-icon name="share-o" @click="showShare = true" />
    <van-cell />
    <van-share-sheet
    v-model="showShare"
    title="立即分享给好友"
    :options="options"
    @select="onSelect"
    />
    <Swiper :bannerArr='gallery'></Swiper>
            <h4>{{name}}</h4>
            <p>{{goods_brief}}</p>
            <span>¥&nbsp;{{retail_price}}&nbsp;元</span>
            <ul>
                <li v-for="item in attribute" :key="item.id">
                    <p>{{item.name}}&nbsp;:&nbsp;{{item.value}}</p>
                </li>
            </ul>
            <van-divider
                :style="{ color: '#333', borderColor: '#333', padding: '0 120px' , fontWeight:'bolder'}"
                > 常见问题
            </van-divider>
            <div class="question" v-for="item in issue" :key="item.id">
                <b>{{item.question}}</b>
                <i>{{item.answer}}</i>
            </div>
            <van-divider
                :style="{ color: '#333', borderColor: '#333', padding: '0 120px' , fontWeight:'bolder'}"
                > 相关商品
            </van-divider>
            <!-- 这个img没用 -->
            <!-- <img :src="list_pic_url" alt=""> -->
            <div class="desc" v-html="goods_desc">{{goods_desc}}</div>
            <!-- 详情页购物车底部菜单 -->
            <van-goods-action>
<!--                 <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" /> -->
                <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
                <van-goods-action-icon icon="cart-o" text="购物车"  :badge="goodsCount" @click="$router.push('/car')"/>
                <van-goods-action-button type="warning" text="加入购物车" @click="addCarMaskFn"/>
                <van-goods-action-button type="danger" text="立即购买" />
            </van-goods-action>
            <!-- 底部购物车弹窗 -->
            <van-sku
                v-model="show"
                :sku="sku"
                :goods="goods"
                :goods-id="goodsId"
                :hide-stock="sku.hide_stock"
                @buy-clicked="onBuyClicked"
                @add-cart="onAddCartClicked"
                ref='myref'
            />
</div>
</template>

<script>
import Swiper from '@/components/Swiper'
import {getDetail,addCarData,getGoodsCount} from '@/utils/http'
import { Toast } from 'vant';
export default {
name: 'ProductDetail',
data() {
return {
    gallery:[],// 轮播图数据
    name:'',// 产品标题
    goods_brief:'',// 产品叙述
    goods_desc:[],// 产品信息，返回html标签
    retail_price:'',// 产品价格
    list_pic_url:'',// sku展示图
    goods_number:'',// sku库存
    attribute:[],//商品参数
    issue:[],// 商品常见问题
    // 弹窗
    show:false, // 是否显示弹窗
    goods:{} ,// 商品信息
    goodsId:'',// 商品id
    sku:{
        // 商品数据
        tree:[],
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        hide_stock: false // 是否隐藏剩余库存
    },
    goods: {
        // 默认商品 sku 缩略图
        picture: String,
    },
    id:'',// 产品id
    goodsCount:0,// 购物车图标数量
    // vant组件
        showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
}
},
props:[''],
components: {
    Swiper
},

created() {
    console.log(this.$route.query);
    getDetail(this.$route.query).then(res=>{
        console.log(res);
        this.gallery = res.data.gallery
        // 后端返回的数据跟Swiper组件中的数据冲突，使用map改
        // map最后要return出一个新的数据来，forEach不会，所以使用map
        // 给item添加一个image_url属性并赋值
        this.gallery = this.gallery.map(item=>{
            item.image_url = item.img_url
            return item
        })
        // 渲染的数据
        this.name = res.data.info.name
        this.goods_brief = res.data.info.goods_brief
        this.goods_desc = res.data.info.goods_desc
        this.retail_price = res.data.info.retail_price.toFixed(2)
        this.list_pic_url = res.data.info.list_pic_url
        this.goods_number = res.data.info.goods_number
        this.attribute = res.data.attribute
        this.issue = res.data.issue
        // 商品详情赋值
        this.goods.picture = res.data.info.list_pic_url
        this.sku.price = res.data.info.retail_price.toFixed(2)
        this.stock_num = res.data.info.goods_number
        this.goodsId = res.data.info.id
        this.id = res.data.productList[0].id
    }).catch(e=>{})
    // 获取购物车数量
    getGoodsCount().then(res=>{
        // console.log(res);
        this.goodsCount = res.data.cartTotal.goodsCount
    })
},
methods: {
    addCarMaskFn(){
        // 点击加入购物车弹窗
        this.show = true
    },
    onBuyClicked(){
        // 点击购买
    },
    onAddCartClicked(){
        // 加入购物车
        // 给绑定ref属性，通过this.$refs.myref.getSkuData()拿到数量的参数进行请求
        // console.log(this.$refs.myref.getSkuData());
        addCarData({
            goodsId : this.goodsId, 
            productId : this.id,
            number:this.$refs.myref.getSkuData().selectedNum,
        }).then(res=>{
            console.log(res);
            if(res.errno == 0){
                // 加入购物车成功
                this.goodsCount = res.data.cartTotal.goodsCount
                this.show = false
                this.$toast({
                    type:'success',
                    duration:1000,
                    message:'添加成功'
                })
            }else{
                // 加入失败
                this.$toast({
                    type:'fail',
                    duration:1000,
                    message:'添加失败'
                })
            }
        }).catch(e=>{})
    },
      onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
},
}
</script>

<style lang='less' scoped>
.detail{
    font-size: 14px;
    /deep/.desc{
        width: 100%;
        display: block;
        p{
            width: 100%;
            img{
            display: block;
            width: 100%;
        }
        }
        
    }
    .goback{
        display: block;
        position: fixed;
        top: 5px;
        left: 5px;
        font-size: 30px;
        z-index: 99;
    }
    /deep/.van-icon-share-o{
        display: block;
        position: fixed;
        top: 8px;
        right: 5px;
        font-size: 30px;
        z-index: 99;
        font-size: 30px;
    }
    /deep/.van-cell{
            padding: 0 16px;
            font-size: 35px;
    }
    h4{
        font-weight: bolder;
        height: 30px;
        line-height: 30px;
            text-align: center;
    }
    p{
        height: 20px;
        line-height: 20px;
        color: grey;
            text-align: center;
    }
    span{
        font-weight: bolder;
        height: 20px;
        line-height: 20px;
        display: block;
        color: rgb(155, 9, 9);
            text-align: center;
    }
    ul{
        li{
            p{
                overflow: hidden;
                /*将对象作为弹性伸缩盒子模型显示*/
                display: -webkit-box;
                /*设置子元素排列方式*/
                -webkit-box-orient: vertical;
                /*设置显示的行数，多出的部分会显示为...*/
                -webkit-line-clamp: 3;
                background: #dbdbdb;
                margin-top:  5px; ;
                border-radius: 15px;
                color: #333;
                font-weight: bolder;
                margin-left: 5px;
                margin-right: 5px;
            }
        }
    }
    .question{
        b{
            display: block;
            margin-bottom: 8px;
            margin-top: 8px;
            font-weight: bolder;
            text-indent: 28px;
        }
        i{
            display: block;
            overflow: hidden;
                /*将对象作为弹性伸缩盒子模型显示*/
                display: -webkit-box;
                /*设置子元素排列方式*/
                -webkit-box-orient: vertical;
                /*设置显示的行数，多出的部分会显示为...*/
                -webkit-line-clamp: 3;
                text-indent: 28px;
        }
    }
    img{
        display: block;
        width: 200px;
    }
}
</style>